<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>管理系统</title>
  <link rel="stylesheet" href="../static/layui/css/layui.css">
  <link rel="stylesheet" href="../static/css/bootstrap.min.css">
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
</head>

<body>
  <div class="wrapper">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
        </li>
        <li class="nav-item d-none d-sm-inline-block">
          <a href="../views/login.html" class="nav-link" onclick="logout()">注销</a>
        </li>
      </ul>

      <ul class="navbar-nav ml-auto">
        <!-- Navbar Search -->
        <li class="nav-item">
          <a class="nav-link" data-widget="navbar-search" href="#" role="button">
            <i class="fas fa-search"></i>
          </a>
          <div class="navbar-search-block">
            <form class="form-inline">
              <div class="input-group input-group-sm">
                <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-append">
                  <button class="btn btn-navbar" type="submit">
                    <i class="fas fa-search"></i>
                  </button>
                  <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </li>
        <!-- 搜索和全屏菜单 -->
        <li class="nav-item">
          <a class="nav-link" data-widget="fullscreen" href="#" role="button">
            <i class="fas fa-expand-arrows-alt"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
            <i class="fas fa-th-large"></i>
          </a>
        </li>
      </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
      <!-- Brand Logo -->
      <a href="" class="brand-link">
        <img src="../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
          style="opacity: .8">
        <span class="brand-text font-weight-light">问卷调查</span>
      </a>

      <!-- Sidebar -->
      <div class="sidebar">
        <!-- Sidebar user panel (optional) -->
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
          <div class="image">
            <img src="../static/kuailefengnan.jpg" class="img-circle elevation-2" alt="User Image">
          </div>
          <div class="info">
            <a href="#" class="d-block">帅辉</a>
          </div>
        </div>

        <!-- 搜索框 -->
        <div class="form-inline">
          <div class="input-group" data-widget="sidebar-search">
            <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
            <div class="input-group-append">
              <button class="btn btn-sidebar">
                <i class="fas fa-search fa-fw"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- Sidebar Menu -->
        <nav class="mt-2">
          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
            <!-- Add icons to the links using the .nav-icon class
                 with font-awesome or any other icon font library -->
            <li class="nav-item menu-open">
              <a href="#" class="nav-link ">
                <i class="nav-icon fas fa-tachometer-alt"></i>
                <p>
                  管理问卷
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="index.html" class="nav-link ">
                    <i class="far fa-circle nav-icon"></i>
                    <p>问卷详情</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="grade.html" class="nav-link ">
                    <i class="far fa-circle nav-icon"></i>
                    <p>问卷评分</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="publish.html" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>发布问卷</p>
                  </a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link active">
                <i class="nav-icon fas fa-th "></i>
                <p>
                  管理用户
                  <i class="right fas fa-angle-left "></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="username.html" class="nav-link active">
                    <i class="far fa-circle nav-icon"></i>
                    <p>查询用户</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="#" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>个人信息</p>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </aside>
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1>用户管理</h1>
            </div>
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加</button>
              </ol>
            </div>
          </div>
        </div><!-- /.container-fluid -->
      </section>
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="exampleModalLabel">New message</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="control-label">Recipient:</label>
                  <input type="text" class="form-control" id="recipient-name">
                </div>
                <div class="form-group">
                  <label for="message-text" class="control-label">Message:</label>
                  <textarea class="form-control" id="message-text"></textarea>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Send message</button>
            </div>
          </div>
        </div>
      </div>
      <!-- Main content -->
      <section class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">用户信息</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                  <table id="example2" class="table table-bordered table-hover" style="text-align: center;">
                    <thead>
                      <tr>
                        <th>id</th>
                        <th>用户名</th>
                        <th>用户密码</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    {%for item in users%}
                    <tbody id="delectFrom">
                      <tr>
                        <td id="{{item.id}}">{{item.id}}</td>
                        <td>{{item.username}}</td>
                        <td>{{item.password}}</td>
                        <td>{{item.createdAt}}</td>
                        <td>{{item.updatedAt}}</td>
                        <td><button class="btn btn-primary" data-toggle="modal"
                            data-target="#lookupmyModalLabel" onclick="huoquuserId('{{item.id}}')">编辑</button>
                          <button class="btn btn-danger" onclick="delect('{{item.id}}')">删除</button>
                        </td>
                      </tr>
                    </tbody>
                    {%endfor%}
                  </table>
                </div>
                <!-- /.card-body -->
              </div>
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
      </section>
      <!-- /.content -->
    </div>
  </div>
  <!-- 右边的小#号框 -->
  <aside class="control-sidebar control-sidebar-dark">
    <div class="p-3">
      <h5>Title</h5>
      <p>Sidebar content</p>
    </div>
  </aside>
  </div>
  <!-- // 添加 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
        </div>
        <form id="registerForm" action="/registerDone" method="POST">
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">账号</label>
            <input class="form-control" type="text" id="username" name="username"
              style="background-color: cornflowerblue;">

          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">用户密码</label>
            <input class="form-control" type="password" id="password" name="password"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">确认密码</label>
            <input class="form-control" type="password" id="confirmpassword" name="confirmpassword"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox modal-footer">
            <button type="button" class="btn btn-outline-primary" onclick="jump()">添加</button>
            <button type="button" class="btn btn-outline-primary" onclick="cancle()">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- // 编辑 -->
  <div class="modal fade" id="lookupmyModalLabel" tabindex="-1" role="dialog" aria-labelledby="#lookupmyModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
        </div>
        <form id="lookupForm" action="/registerDone" method="POST">
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">修改账号</label>
            <input class="form-control" type="text" id="lookupusername" name="lookupusername"
              style="background-color: cornflowerblue;">

          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">修改密码</label>
            <input class="form-control" type="password" id="lookuppassword" name="lookuppassword"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox modal-footer">
            <button type="button" class="btn btn-outline-primary" onclick="lookup()">编辑</button>
            <button type="button" class="btn btn-outline-primary" onclick="cancle()">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="../plugins/jquery/jquery.min.js"></script>
  <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../dist/js/adminlte.min.js"></script>
  <script src="../static/layui/layui.js"></script>
  <script src="../static/js/jquery-3.6.0.min.js"></script>
  <script src="../static/js/bootstrap.min.js"></script>
  <script>
    let currentMsgId = '';
    function logout() {
      $.ajax({
        url: "/logout",
        type: "POST",
        dataType: "json",
        success: function (res) {
          console.log(res);
          if (res.code === 200) {
            window.location.href = "/login";
          }
        },
        error: function (msg) {
          console.log('网络或者服务器有问题');
        }
      })
    }
    // 添加

    function jump() {
      let username = $('#username').val();
      let password = $('#password').val();
      let confirmpassword = $('#confirmpassword').val();
      if (username.length > 0 && password.length > 0 && password === confirmpassword) {
        $.ajax({
          url: "/registerDone",
          type: "POST",
          data: $('#registerForm').serialize(),
          dataType: "json",
          success: function (res) {
            console.log(res);
            if (res.code === 200) {
              window.location.href = "/username";
            } else {
              console.log(res.msg);
            }
          },
          error: function (msg) {
            console.log('网络或者服务器有问题');
          }
        })
      }
    }
    function alert_fn(msg) {
      msg = msg || "密码不能为空，密码和确定密码必须一致";
      $('#msg').text(msg);
      $('.invisible').removeClass('invisible');
      setTimeout(() => {
        $('.alert').addClass('invisible')
      }, 3000);
    }
    function cancle() {
      window.location.href = '/username'
    }
    // 删除
    function delect(userId) {
      console.log(userId);
      let data = {
        userId: userId
      }
      console.log(data);
      $.ajax({
        url: "/delect",
        type: "POST",
        data: data,
        dataType: "json",
        success: function (res) {
          console.log(res);
          if (res.code === 200) {
            window.location.href = "/username";
          } else {
            console.log(res.msg);
          }
        },
        error: function (msg) {
          console.log('网络或者服务器有问题');
        }
      })
    }
    function huoquuserId(userId) {
                userId = userId;
            }
    function lookup(userId) {
      let lookupusername = $('#lookupusername').val();
      let lookuppassword = $('#lookuppassword').val();
      let data = {
        userId: userId,
        lookupusername: lookupusername,
        lookuppassword: lookuppassword
      }
      console.log(data);
      if (lookupusername.length > 0 && lookuppassword.length > 0) {
        $.ajax({
          url: "/lookup",
          type: "POST",
          data: data,
          dataType: "json",
          success: function (res) {
            console.log(res);
            if (res.code === 200) {
              window.location.href = "/username";
            } else {
              console.log(res.msg);
            }
          },
          error: function (msg) {
            console.log('网络或者服务器有问题');
          }
        })
      } else {

      }


    }
  </script>
</body>

</html>